<template>
	<div id="app">
		<div id="baiduMap">
			<baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo"
			 :scroll-wheel-zoom='true'>
				<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"
				 @locationSuccess="locationSuccess"></bm-geolocation>
				<bm-circle :fillColor="'#f03'" :fill-opacity="0.5" :stroke-style="'solid'" :center="center" :radius="radius" @mouseover="mouseover" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"
				 @lineupdate="updateCirclePath" :editing="true"></bm-circle>
			</baidu-map>

			<button @click="assign">签到</button>
			<button @click="relocation">重新定位</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				center: {
					lng: 120.102232, //设置默认打卡地点经纬度
					lat: 30.284444
				},
				asign:{
					lng: 0, //签到
					lat: 0
				},
				radius: 1000,
				zoom: 13
			}
		},
    created() {

    },
    methods: {
      relocation(){
        let geolocation = new BMap.Geolocation()
        geolocation.getCurrentPosition((r) => {
          if (r.point) {
            this.center.lng = r.longitude
            this.center.lat = r.latitude
          }
        }, {
          enableHighAccuracy: true
        })
      },
			//根据两组经纬度算出半径
			getGreatCircleDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = (lat1 * Math.PI) / 180.0;
				var radLat2 = (lat2 * Math.PI) / 180.0;
				var a = radLat1 - radLat2;
				var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
				var s =
					2 * Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
							Math.cos(radLat2) *
							Math.pow(Math.sin(b / 2), 2)
						)
					);
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10;
				return s;
			},
			handler({
				BMap,
				map
			}) {
				//设置打卡地点
				var point = new BMap.Point(this.center.lng, this.center.lat)
				map.centerAndZoom(point, 13)
				var marker = new BMap.Marker(point) // 创建标注
				map.addOverlay(marker) // 将标注添加到地图中
				var circle = new BMap.Circle(point, 6, {
					strokeColor: 'Red',
					strokeWeight: 6,
					strokeOpacity: 1,
					Color: 'Red',
					fillColor: '#f03'
				})
				map.addOverlay(circle)
			},
			locationSuccess(point, AddressComponent, marker) {
				let geocoder = new BMap.Geocoder(); //创建地址解析器的实例


			},
      //根据经纬度获取打卡地点位置
      mouseover(e){
        let nowLng = e.point.lng;
        let nowLat = e.point.lat;
        var point = new BMap.Point(nowLng,nowLat);
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function(rs){
          var addComp = rs.addressComponents;
          alert("打卡地点"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
        console.log(point)
      },
			getClickInfo(e) {
				let nowLng = e.point.lng;
				let nowLat = e.point.lat;
				console.log(e.point.lng)
				console.log(e.point.lat)
								this.center.lng = e.point.lng
								this.center.lat = e.point.lat


// 				let assignCircle = this.getGreatCircleDistance(nowLat, nowLng, this.center.lat, this.center.lng);
// 				console.log(assignCircle)
			},
			updateCirclePath(e) {
				let center = e.target.getCenter()
				let radius = e.target.getRadius()
			},
			//获取签到坐标，默认设置两点之间的坐标为200米之内算签到位置
			assign() {

        new Promise((resolve, reject) => {
          let geolocation = new BMap.Geolocation()
          geolocation.getCurrentPosition((r) => {
            if (r.point) {
              this.asign.lng = r.longitude;
              this.asign.lat = r.latitude;
              let assignCircle = this.getGreatCircleDistance(this.asign.lat, this.asign.lng, this.center.lat, this.center.lng);
              if (assignCircle <= this.radius) {
                alert("签到范围在考勤区域内，签到成功.距签到地点距离：" + assignCircle);
                var point = new BMap.Point(r.longitude,r.latitude);
                var gc = new BMap.Geocoder();
                gc.getLocation(point, function(rs){
                  var addComp = rs.addressComponents;
                  alert("签到地点"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                });
              } else {
                alert("不在考勤范围内" + assignCircle)
              }
            }
          }, {
            enableHighAccuracy: true
          })
          resolve();
        }).finally(() => {
          // alert("考勤结束")
        });



			}
		}
	}
</script>

<style>
	#baiduMap {
		width: 600px;
		height: 500px;
		margin-left: 100px;
		border: #42B983;
	}

	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>
